<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <!-- CSS reset -->
  <link rel="stylesheet" href="css/html5reset-1.6.1.css" type="text/css"/>
  <!-- Loading pop-up styling -->
  <link rel="stylesheet" href="css/default.css" type="text/css"/>
  <link rel="stylesheet" href="css/tipsy.css" type="text/css"/>
  <link rel="stylesheet" href="css/jquery.jscrollpane.css" type="text/css"/>
  <!-- Loading pop-up logic -->
  <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.cookie.js"></script>
  <script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
  <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
  <script type="text/javascript" src="js/mwheelIntent.js"></script>
  <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
  <script type="text/javascript" src="js/jquery.tipsy.js"></script>
  <script type="text/javascript" src="js/common.js"></script>
  <script type="text/javascript" src="js/popup.js"></script>

</head>
<body>
<a id="minimize" onClick="pokki.closePopup()"></a>

<div id="template_content">

</div>

<script id="login_template" type="text/x-jquery-tmpl">
  <div id="login">
    <h1>oranged-login</h1>

    <form name="login-oranged">
        <span class="goreddit">login with your <a href="http://www.reddit.com" class="external_link">reddit<a/> account</span>
      <input name="user" type="text" id="user" value="${user}" placeholder="username">
      <input name="" type="password" id="password" value="${password}" placeholder="password">
      <input name="" type="button" class="orange-button" value="login"> <span class="forgot-password"><a
      href="http://www.reddit.com/password" class="external_link">recover password</a></span>
        <span class="powered">
        <a class="external_link" title="meet narwhalware" href="http://www.narwhalware.com">narwhalware</a></span>
    </form>
  </div>
</script>

<script id="messages_template" type="text/x-jquery-tmpl">
  <a href="#" id="logout">logout</a>

  <div id="messages_container">
      <div id="tabs">
          <ul>
              <li id="messages-tab" class="selected-tab">messages</li>
              <li id="whatshot-tab">what's hot</li>
              <li id="viewinbox-tab"><a href="http://www.reddit.com/message/inbox" class="external_link inbox_link">view inbox</a></li>
          </ul>
      </div>
    <div class="scroll-pane">
    {{if messages.length > 0}}
      <div id="messages_list">
        {{each messages}}
        <div class="message ${$value.class_unread}" thing-id="${$value.thing_id}">
          <h2>from <a style="float: none;" href="http://www.reddit.com/user/${$value.author}" class="external_link">${$value.author}</a><a class="tooltip time" href="#" title="${$value.posted_time_ago}"></a>
            <a href="#" class="tooltip reply" title="reply message"></a>
            {{if view_in_context}}
                <a href="${$value.view_in_context}" class="tooltip context" href="#" title="view in context"></a>
            {{/if}}
          </h2>
          <p class="${$value.class_message_type}">${$value.body}</p>
        </div>
        {{/each}}
        {{if after}}
          <span class="show-more" after="${after}">show more</span>
        {{/if}}
      </div>
    {{else}}
      <p class="no_messages">there doesn't seem to be anything here</p>
    {{/if}}
    </div>
  </div>
</script>

<script id="message_list_template" type="text/x-jquery-tmpl">
{{each messages}}
        <div class="message ${$value.class_unread}" thing-id="${$value.thing_id}">
          <h2>from <a style="float: none;" href="http://www.reddit.com/user/${$value.author}" class="external_link">${$value.author}</a><a class="tooltip time" href="#" title="${$value.posted_time_ago}"></a>
            <a href="#" class="tooltip reply" title="reply message"></a>
            {{if view_in_context}}
                <a href="${$value.view_in_context}" class="tooltip context" href="#" title="view in context"></a>
            {{/if}}
          </h2>
          <p class="${$value.class_message_type}">${$value.body}</p>
        </div>
        {{/each}}
        {{if after}}
          <span class="show-more" after="${after}">show more</span>
        {{/if}}
</script>

<script id="whatshot_template" type="text/x-jquery-tmpl">
  <a href="#" id="logout">logout</a>

  <div id="messages_container">
      <div id="tabs">
          <ul>
              <li id="messages-tab">messages</li>
              <li id="whatshot-tab" class="selected-tab">what's hot</li>
              <li id="viewinbox-tab"><a href="http://www.reddit.com/message/inbox" id="inbox_link" class="external_link inbox_link">view inbox</a></li>
          </ul>
      </div>
    <div class="scroll-pane">
        {{if posts.length > 0}}
            <div id="post_list">
            {{each posts}}
                <div class="post">
                    <div class="left-post">
                        <span class="score">${$value.score}</span>
                    </div>
                    <div class="right-post">
                        <p class="title"><a href="${$value.url}" class="external_link">${$value.title}</a></p>
                        <p class="created_at">submitted ${$value.time_ago} by <span class="user"><a href="http://www.reddit.com/user/${$value.user}" class="external_link">${$value.user}</a></span> to
                            <span class="subreddit"><a href="http://www.reddit.com/r/${$value.subreddit}" class="external_link">${$value.subreddit}</a></span></p>
                        <p class="num_comments"><a href="http://www.reddit.com/${$value.permalink}" class="external_link">${$value.num_comments} comments</a></p>
                    </div>
                </div>
            {{/each}}
            {{if after}}
                <span class="show-more-posts" after="${after}">show more</span>
            {{/if}}
            </div>
        {{else}}
            <p class="no_messages">there doesn't seem to be anything here</p>
        {{/if}}
    </div>
  </div>
</script>

<script id="post_list_template" type="text/x-jquery-tmpl">
            {{each posts}}
                <div class="post">
                    <div class="left-post">
                        <span class="score">${$value.score}</span>
                    </div>
                    <div class="right-post">
                        <p class="title"><a href="${$value.url}" class="external_link">${$value.title}</a></p>
                        <p class="created_at">submitted ${$value.time_ago} by <span class="user"><a href="http://www.reddit.com/user/${$value.user}" class="external_link">${$value.user}</a></span> to
                            <span class="subreddit"><a href="http://www.reddit.com/r/${$value.subreddit}" class="external_link">${$value.subreddit}</a></span></p>
                        <p class="num_comments"><a href="http://www.reddit.com/${$value.permalink}" class="external_link">${$value.num_comments} comments</a></p>
                    </div>
                </div>
            {{/each}}
            {{if after}}
                <span class="show-more-posts" after="${after}">show more</span>
            {{/if}}
            </div>
</script>
</body>
</html>